<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>添加曲线</title>
	<link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>
	<form class="layui-form" action="" style="margin-left:70px;">
		<div class="layui-fluid">
			<div class="layui-card-body">
				<div class="layui-form" lay-filter="">
					<div class="layui-form-item">
						<label class="layui-form-label">控件类型：</label>
						<div class="layui-input-inline" style="width:160px">
							<select id="Modeltype" name="Modeltype" lay-filter="Modeltype">
								<option value="1">深度</option>
								<option value="2">时间</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">曲线名称：</label>
						<div class="layui-input-block" style="width:160px">
							<select id="ident" name="ident" class="from-control" lay-filter="ident"></select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">曲线别名：</label>
						<div class="layui-input-block" style="width:160px">
							<input type="text" id="name2" name="left" lay-verify="title" autocomplete="off"
								placeholder="请输入值" class="layui-input" style="width:160px">
						</div>
					</div>

					<div id="non" style="display: none;">
						<input type="text" id="hd1" hidden value="">
						<input type="text" id="hd2" hidden value="">
					</div>

					<div id="pubval">
						<div class="layui-form" lay-filter="">
							<div class="layui-form-item">
								<label class="layui-form-label">最大值：</label>
								<div class="layui-input-inline">
									<input type="text" id="Cmaxs" name="Cmax" value="" autocomplete="off"
										onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');" class="layui-input"
										style="width:160px">
								</div>
							</div>
						</div>
						<div class="layui-form" lay-filter="">
							<div class="layui-form-item">
								<label class="layui-form-label">最小值：</label>
								<div class="layui-input-inline">
									<input type="text" id="Cmins" name="Cmin" value="" autocomplete="off"
										onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');" class="layui-input"
										style="width:160px">
								</div>
							</div>
						</div>

						<div class="layui-form" lay-filter="">
							<div class="layui-form-item">
								<label class="layui-form-label">曲线单位：</label>
								<div class="layui-input-inline">
									<input type="text" id="Cmax" name="Cmax" value="" autocomplete="off"
										class="layui-input" disabled style="width:160px">
								</div>
							</div>
						</div>
						<div class="layui-form" lay-filter="">
							<div class="layui-form-item">
								<label class="layui-form-label">字体大小：</label>
								<div class="layui-input-inline">
									<input type="text" id="Cmin" name="Cmin" value="18" autocomplete="off"
										class="layui-input" onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');"
										style="width:160px">
								</div>
							</div>
						</div>

					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">文字颜色：</label>
						<div class="layui-input-inline" style="width: 120px;">
							<input type="text" value="" name="color" readonly placeholder="请选择颜色" autocomplete="off"
								class="layui-input" id="test-form-input">
						</div>
						<div class="layui-inline" style="left: -11px;">
							<div id="test-form"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</form>
</body>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="../../layui/public.js"></script>
<script>
	layui.use(['form', 'colorpicker', 'layer'], function () {
		var form = layui.form;
		var colorpicker = layui.colorpicker;
		var layer = layui.layer;
		var list;

		//身份验证
		if (getoken != false) {
			//获取单位
			$.ajax({
				type: "get",
				url: api_address + '/curve/getcur',
				async: false,
				headers: {
					Authorization: getoken
				},
				contentType: 'application/json;',
				success: function (res) {
					console.log(res);
					if (res.code == 200) {
						list = res.data;

					}

				}
			});

			//曲线类型监听事件
			form.on('select(Modeltype)', function (data) {
				$("#ident").empty();
				for (var i = 0; i < list.length; i++) {
					if (data.value == list[i].curveType) {
						var option = "<option value=\"" + list[i].curveName + "\"";
						option += ">" + list[i].curveName + "</option>"; //动态添加数据
						$("select[name=ident]").append(option);
					}
				}
				form.render();
			})

			//曲线名称的监听事件
			form.on('select(ident)', function (data) {
				var vs = $("#ident option:checked").val();
				for (var i = 0; i < list.length; i++) {
					if (vs == list[i].curveName) {
						$("#name2").val(list[i].curveName);
						$("#Cmaxs").val(list[i].cmax);
						$("#Cmins").val(list[i].cmin);
						$("#Cmax").val(list[i].curveUnit);
						$("#hd1").val(list[i].tableName)
						$("#hd2").val(list[i].params)
					}
				}
			})
		}
		//表单赋值
		colorpicker.render({
			elem: '#test-form'
			, color: '#1c97f5'
			, done: function (color) {
				$('#test-form-input').val(color);
			}
		});
	})
	var retdata = function () {
		var name = $("#ident option:checked").text(); //标识
		let name2 = $("#name2").val();   //曲线别名
		let max = $("#Cmaxs").val();     //最大值
		let min = $("#Cmins").val();     //最小值
		let unit = $("#Cmax").val();    //单位
		let size = $("#Cmin").val();    //大小
		let tablename = $("#hd1").val(); //表名
		let parameter = $("#hd2").val();  //字段
		let color = $("#test-form-input").val();  //颜色
		var data = { name, name2, unit, size, tablename, parameter, color, max, min };
		return data;
	}
</script>

</html>